﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <!-- load angular -->
    <script src="http://code.angularjs.org/1.2.6/angular.js"></script>
    <script src="~/Scripts/verifyApp.js"></script>
    <script src="~/Scripts/VerificationService.js"></script>
    <!--[if IE]>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <![endif]-->

    <title>R4U Account Verification</title>
    <!-- BOOTSTRAP CORE STYLE CSS -->
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <!-- FONTAWESOME STYLE CSS -->
    <link href="~/Content/font-awesome.min.css" rel="stylesheet" />
    <!-- CUSTOM STYLE CSS -->

    <!-- GOOGLE FONT -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
</head>
<body ng-app="verifyApp" style="background: url('http://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-3-full.jpg') repeat">
    <br />
    <br />
    <br />
    <br />
    <br />
    <div class="container" style="opacity: 0.93">
        <div class="row  pad-top">

            <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <strong><b>R4U Account Verification</b> </strong>
                    </div>
                    <div class="panel-body" ng-controller="VerifyController" data-ng-init="loadContacts()">
                        <form name="userForm" novalidate>
                           <p style="text-align:center"><img id="spinner" ng-src="~/img/loading.gif" style="display:none;"></p>
                           <p class="text-danger">{{error}}</p>
                           <p class="text-success">{{success}}</p>

                            <div class="form-group input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                <select class="form-control" ng-model="contactlist" ng-options="contact.name for contact in contacts">
                                    <option value="" selected disabled>Verification Method</option>
                                </select>
                            </div>

                            <div class="form-group input-group" ng-class="{ 'has-error' : userForm.password.$invalid && !userForm.password.$pristine }">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input type="number" ng-model="password" name="password" class="form-control" placeholder="Verification Code" required/>
                            </div>

                            <p style="text-align: right">
                                <button class="btn btn-primary" ng-click="sendCode()">Get Code</button>
                                <button class="btn btn-primary" ng-disabled="userForm.$invalid" ng-click="activateMyAccount(password)">Verify</button>
                            </p>
                            <hr />
                            <div class="alert alert-danger alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  <strong>Warning!</strong> Your account has not yet been verified. Please select verification method and click Get Code button to receive verification code.
</div>
                        </form>
                    </div>

                </div>
            </div>


        </div>
    </div>


    <!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME  -->
    <!-- CORE JQUERY  -->
    <script src="~/Scripts/jquery-1.9.1.js"></script>
    <!-- BOOTSTRAP SCRIPTS  -->
    <script src="~/Scripts/bootstrap.js"></script>

</body>
</html>

